<template>
    <div class="nav-bar">
        <div class="nav-tabs2">
            <Icon
                v-if="config.layout.layoutMode != 'Streamline'"
                @click="onMenuCollapse"
                :name="config.layout.menuCollapse ? 'fa fa-indent' : 'fa fa-dedent'"
                :class="config.layout.menuCollapse ? 'unfold' : ''"
                :color="config.getColorVal('menuActiveColor')"
                size="20"
                class="ba-nav-tab"
                style="color: #1d1e1f"
            />

        </div>
        <div class="nav-tabs3">
            <el-breadcrumb separator="/">
<!--                <el-breadcrumb-item :to="{ path: `${navTabs.state.activeRoute}` }">{{ navTabs.state.activeRoute.meta.title }}</el-breadcrumb-item>-->
            </el-breadcrumb>
        </div>
        <NavMenus/>
    </div>
</template>

<script setup lang="ts">
import {useConfig} from '/@/stores/config'
import NavMenus from '../navMenus.vue'
import {closeShade, showShade} from '/@/utils/pageShade'
import {Session} from "/@/utils/storage";
import {BEFORE_RESIZE_LAYOUT} from "/@/stores/constant/cacheKey";
import {setNavTabsWidth} from "/@/utils/layout";
import {useNavTabs} from "/@/stores/navTabs";

const navTabs = useNavTabs()
const config = useConfig()


// setTimeout(() => {
//     console.log(navTabs.state.activeRoute)
// }, 2000)

const onMenuCollapse = function () {
    if (config.layout.shrink && !config.layout.menuCollapse) {
        closeShade()
    }

    config.setLayout('menuCollapse', !config.layout.menuCollapse)

    Session.set(BEFORE_RESIZE_LAYOUT, {
        layoutMode: config.layout.layoutMode,
        menuCollapse: config.layout.menuCollapse,
    })

    // 等待侧边栏动画结束后重新计算导航栏宽度
    setTimeout(() => {
        setNavTabsWidth()
    }, 350)
}
</script>

<style scoped lang="scss">
.nav-bar {
    display: flex;
    height: 50px;
    width: 100%;
    background-color: v-bind('config.getColorVal("headerBarBackground")');

    :deep(.nav-tabs) {
        display: flex;
        height: 100%;
        position: relative;

        .ba-nav-tab {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 20px;
            cursor: pointer;
            z-index: 1;
            height: 100%;
            user-select: none;
            color: v-bind('config.getColorVal("headerBarTabColor")');
            transition: all 0.2s;
            -webkit-transition: all 0.2s;

            .close-icon {
                padding: 2px;
                margin: 2px 0 0 4px;
            }

            .close-icon:hover {
                background: var(--ba-color-primary-light);
                color: var(--el-border-color) !important;
                border-radius: 50%;
            }

            &.active {
                color: v-bind('config.getColorVal("headerBarTabActiveColor")');
            }

            &:hover {
                background-color: v-bind('config.getColorVal("headerBarHoverBackground")');
            }
        }

        .nav-tabs-active-box {
            position: absolute;
            height: 50px;
            background-color: v-bind('config.getColorVal("headerBarTabActiveBackground")');
            transition: all 0.2s;
            -webkit-transition: all 0.2s;
        }
    }

    :deep(.nav-tabs2) {
        display: flex;
        height: 100%;
        position: relative;

        .ba-nav-tab {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 20px;
            cursor: pointer;
            z-index: 1;
            height: 100%;
            user-select: none;
            color: v-bind('config.getColorVal("headerBarTabColor")');
            transition: all 0.2s;
            -webkit-transition: all 0.2s;

            .close-icon {
                padding: 2px;
                margin: 2px 0 0 4px;
            }

            .close-icon:hover {
                background: var(--ba-color-primary-light);
                color: var(--el-border-color) !important;
                border-radius: 50%;
            }

            &.active {
                color: v-bind('config.getColorVal("headerBarTabActiveColor")');
            }

            &:hover {
                background-color: v-bind('config.getColorVal("headerBarHoverBackground")');
            }
        }

        .nav-tabs-active-box {
            position: absolute;
            height: 50px;
            background-color: v-bind('config.getColorVal("headerBarTabActiveBackground")');
            transition: all 0.2s;
            -webkit-transition: all 0.2s;
        }
    }

    :deep(.nav-tabs3) {
        display: flex;
        align-items: center;
        height: 50px;
        margin: 0 15px;
    }
}

.unfold {
    align-self: center;
    padding-left: var(--ba-main-space);
}
</style>
